<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .item {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 上拉加载 
         van-list
            v-model:boolean值  true:正在加载过程中(该loading在上拉加载时会自动变成true) false:此次加载完成
            finished:boolean true:所有数据加载  false:还没有加载完成
            finished-text:加载完成后显示的字符
            @load="上拉加载的方法"
      -->
        <van-list v-model="loading" :finished="finished" finished-text="已加载完成" @load="load">
            <ul>
                <li class="item" v-for="(item,index) in arr" :key=index> {{item}}</li>
            </ul>

        </van-list>

    </div>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css" />


    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                arr: [],
                loading: false,
                finished: false//表示加载完成就变成true
            },
            methods: {
                load() {
                    setTimeout(() => {
                        this.arr.push(...[1, 2, 3, 4, 5]);
                        this.loading = false;
                        if (this.arr.length > 30) {
                            this.finished = true;
                        }
                    }, 1000);
                }

            },
        });
    </script>
</body>

</html>